<template>
    <div class="form">
        <form action="#" class="form-horizontal">
            <div class="form-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">场次名称</label>
                            <div class="col-md-9">
                                <el-input v-model="data.SessionName" placeholder="请输入场次名称"></el-input>
                            </div>
                        </div> 
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">比赛类型</label>
                            <div class="col-md-9">
                                <el-select v-model="data.SessionType" placeholder="请选择比赛项目条件" style="width:100%">
                                    <el-option v-for="(word, index) of words.types" :key="index" :label="word" :value="index"></el-option>
                                </el-select>  
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">比赛时间</label>
                            <div class="col-md-9">
                                <el-date-picker v-model="data.SessionTime0" value-format="yyyy-MM-dd H:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%"></el-date-picker>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">比赛地点</label>
                            <div class="col-md-9">
                                <el-select v-model="data.SessionRoom" filterable placeholder="请选择比赛场地" style="width:100%">
                                    <el-option v-for="room of rooms" :key="room.RoomSite" :label="room.RoomSite" :value="room.RoomSite"></el-option>
                                </el-select>                                
                            </div>
                        </div> 
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <el-table id="juryTable" :data="[data]" border style="width: 100%">
                            <el-table-column align="center" label="评委组长">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.Jury0" filterable placeholder="请选择评委组长" style="width:100%">
                                        <el-option v-for="jury of juries" :key="jury.JuryName" :label="jury.JuryName" :value="jury.JuryName"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="评委二">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.Jury1" filterable placeholder="请选择评委二" style="width:100%">
                                        <el-option v-for="jury of juries" :key="jury.JuryName" :label="jury.JuryName" :value="jury.JuryName"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="评委三">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.Jury2" filterable placeholder="请选择评委三" style="width:100%">
                                        <el-option v-for="jury of juries" :key="jury.JuryName" :label="jury.JuryName" :value="jury.JuryName"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="评委四">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.Jury3" filterable placeholder="请选择评委四" style="width:100%">
                                        <el-option v-for="jury of juries" :key="jury.JuryName" :label="jury.JuryName" :value="jury.JuryName"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="评委五">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.Jury4" filterable placeholder="请选择评委五" style="width:100%">
                                        <el-option v-for="jury of juries" :key="jury.JuryName" :label="jury.JuryName" :value="jury.JuryName"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="评委六">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.Jury5" filterable clearable placeholder="请选择评委六" style="width:100%">
                                        <el-option v-for="jury of juries" :key="jury.JuryName" :label="jury.JuryName" :value="jury.JuryName"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="评委七">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.Jury6" filterable clearable placeholder="请选择评委七" style="width:100%">
                                        <el-option v-for="jury of juries" :key="jury.JuryName" :label="jury.JuryName" :value="jury.JuryName"></el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>            
        </form>
    </div>
</template>

<script>
export default {
    props: {
        'data': {
            type: Object,
            default: null
        },
    },
    data() {
        return {
            juries: [],
            rooms: [],
            words: {
                types: {
                   'PRELIMINARY': '初赛',
                   'REMATCH': '复赛',
                   'FINALS': '决赛'
                }
            },            
        }
    },
    mounted() {
        // 加载评委列表和比赛场地列表
        this.$DataService.GetRooms().then(ret => { this.rooms = ret;});
        this.$DataService.GetJuries().then(ret => { this.juries = ret;});
    },

    methods: {
        save() {
            return this.$SessionService.ModifySession(this.data)
                .then(ret => {
                    if(ret) {
                        return this.data;                 
                    }
                });
        }
    }
}
</script>

<style>
#juryTable .el-table__body-wrapper {
    overflow-x: hidden;
}
</style>
